<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>购物车</title>
		<link rel="stylesheet" href="../libs/mui/mui.min.css" />
		<link rel="stylesheet" href="../libs/iconfont/fonts/iconfont.css"/>
		<link rel="stylesheet" type="text/css" href="../css/main.css"/>					
	</head>	
	<style>
		.mui-content>.list-p:not(:first-child){margin-top: 3px;}
		.mui-checkbox input[type=checkbox]:checked:before,.mui-radio input[type=radio]:checked:before {
			content: '\e442';
			color: #139f13;
		}
		.mui-checkbox input[type=checkbox]:before,.mui-radio input[type=radio]:before{font-size: 24px;}
		.mui-checkbox input[type=checkbox]{top: 8px; left: 0px !important;}
		.mui-checkbox.mui-left{display: inline-block;}
		.wid1{width: 13%;}
		.wid2{width: 87%;}
		/*全选*/
		.all-chose.mui-checkbox input[type=checkbox]{top: 11px; left: 0px !important;}
		.all-chose.mui-checkbox.mui-left label{font-size: 14px; padding: 13px 0 0 30px;width:auto !important;}
		.mui-bar .mui-btn{top:0;bottom: 0; padding: 13px 25px 20px;border: none; background-color:#139f13;color: white;border-radius: inherit;}
   		/*图片*/
   		.mui-media-body{font-size: 14px;}
   		.mui-table-view-cell>a:not(.mui-btn){
			 white-space:normal
		}
		.mui-table-view .mui-media-object {
			line-height: 75px;
			max-width: 50px;
			height: 75px;
		}
   		.alert{position: fixed;bottom: 0;left: 0;right: 0;background-color: #fff;z-index: 999;display: none;}
		.alert .mui-table-view-cell:after {left: 0;}
		.alert .mui-table-view-cell>span{color: red;}
		.alert .mui-table-view-cell>button{background-color:#139f13;color: #fff;border: none;width: 80%;border-radius: 30px;margin: 8px 0;padding: 8px 12px;}
		.alert-back{position: fixed;top: 0;bottom: 0;left:0;right: 0;background-color: #000000;opacity: .4;filter: alpha(opacity=40); z-index: 99;display: none;}
		/*余额不足支付*/
		.mui-input-row label{padding: 0;vertical-align: middle;padding-left: 36px !important;display: inline;}
		.mui-radio input[type=radio]{top: -1px;left: 0 !important;right:0;}
		.mui-input-row input[type=text]{border:1px solid #aaa;padding: 0 !important;height: auto; width:50%;}
	</style>
	<body>
		<!--头部导航-->
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left">
				<span>购物车</span>
			</a>
			<a class="mui-pull-right" id='promptBtn'>
				<i class="mui-icon iconfont">&#xe623;</i>
			</a>
		</header>
		<nav class="mui-bar mui-bar-footer" style="padding-right: 0;">
			<div class="mui-checkbox mui-left all-chose">
				<label>全选</label>
				<input name="checkboxs" value="Item1" type="checkbox" id="allBox">
			</div>
			<div class="mui-pull-right btn">
				<div class="jiesuan">
					<span style="margin-top: 13px;margin-right: 20px; display: inline-block;">合计：<span class="mui-red totalmoney">￥0</span></span>
					<button type="button" class="mui-btn">结算</button>
				</div>
			</div>
		</nav>
		<!--中间导航-->
		<div class="mui-content">
			<div class="lists"></div>
			<!--<div class="list-p">
				<ul class="mui-table-view">
					<li class="mui-table-view-cell mui-media" >
						<div class="mui-pull-left wid1">
							<div class="mui-checkbox mui-left">
								<input name="checkbox" value="Item 1" type="checkbox" checked="checked">
							</div>
						</div>
						<div class="mui-pull-left wid2 text" >
							<img class="mui-media-object mui-pull-left" src="../public/img/3.jpg">
							<div class="mui-media-body">
								<span>老人与海</span>
								<p class="mui-ellipsis" style="padding: 5px 0 7px; font-size: 13px;">
									<span>海明威</span>							
								</p>
								<p>
									<span class="mui-h5 mui-red">￥8</span>
								</p>
							</div>
						</div>
					</li>
				</ul>
			</div>
			<div class="list-p">
				<ul class="mui-table-view">
					<li class="mui-table-view-cell mui-media" >
						<div class="mui-pull-left wid1">
							<div class="mui-checkbox mui-left">
								<input name="checkbox" value="Item1" type="checkbox">
							</div>
						</div>
						<div class="mui-pull-left wid2 text" >
							<img class="mui-media-object mui-pull-left" src="../public/img/3.jpg">
							<div class="mui-media-body">
								<span>老人与海</span>
								<p class="mui-ellipsis" style="padding: 5px 0 7px; font-size: 13px;">
									<span>海明威</span>							
								</p>
								<p>
									<span class="mui-h5 mui-red">￥8</span>
								</p>
							</div>
						</div>
					</li>
				</ul>
			</div>-->
			<!--购买-->
			<div class="alert buy">
				<div class="alert-content">
					<ul class="mui-table-view">
						<li class="mui-table-view-cell mui-text-center">
							购买确认
						</li>
						<li class="mui-table-view-cell">
							价格：<span class="total_price"></span>
						</li>
						<li class="mui-table-view-cell">
							余额：<span class="account_price"></span>
						</li>
						<li class="mui-table-view-cell">
							支付方式：<span class="back pay_type"></span>
						</li>
						<li class="mui-table-view-cell mui-text-center balance_pay">
							<button type="button">支付金额<span class="total_price">0.00<span>元</button>
						</li>
					</ul>
				</div>
			</div>
			<!--余额不足-->
			<div class="alert balance">
				<div class="alert-content">
					<ul class="mui-table-view">
						<li class="mui-table-view-cell mui-text-center">
							余额不足支付
						</li>
						<li class="mui-table-view-cell">
							<div class="mui-input-row mui-radio mui-left">
								<label>使用注册手机支付</label>
								<input name="pay" value="Item 1" type="radio" checked>
							</div>
						</li>
						<li class="mui-table-view-cell">
							<div class="mui-input-row mui-radio mui-left">
								<label>其他手机</label>
								<input name="pay" value="Item 2" type="radio">
								<input type="text" />
							</div>
						</li>
						<li class="mui-table-view-cell mui-text-center" style="margin-top: 43px;">
							<button type="button" class="sure-pay">确定支付</button>
						</li>
					</ul>
				</div>
			</div>
			<div class="alert-back"></div>
		</div> 
	</body>
	<script type="text/javascript" src="../js/mui.js"></script>
	<script type="text/javascript" src="../libs/jquery/jquery.js"></script>	
	<script type="text/javascript" src="../js/function.js"></script>
	<script type="text/javascript" src="../js/open.js"></script>
	<script type="text/javascript" src="../js/public.js" ></script>
	<script type="text/javascript" src="../js/app/buy.js" ></script>
	<script type="text/javascript" src="../js/app/shopping-car.js" ></script>
	<script type="text/javascript" src="../js/details.js" ></script>
	<script>
//		var num = $("input[name='checkbox']:checked").length;
		
//		$("input[name='checkbox']").each(function(i){
//			$(this).on('click',function(){
//				num=$("input[name='checkbox']:checked").length;
//				len=$("input[name='checkbox']").length;
//				if(num==len){
//		        	$(".all-chose>input[type='checkbox']").prop('checked',true);
//	        	}else{
//		        	$(".all-chose>input[type='checkbox']").prop('checked',false);
//	        	}
//      	})
//		})

//			var info = document.getElementById("info");
//				document.getElementById('promptBtn').addEventListener('tap', function(e) {
//				e.detail.gesture.preventDefault(); //修复iOS 8.x平台存在的bug，使用plus.nativeUI.prompt会造成输入法闪一下又没了
//				var btnArray = ['取消', '确定'];
//				mui.confirm(' ', '确定要删除这条记录吗？', btnArray, function(e) {
//					if (e.index == 1) {
////						info.innerText = '你刚确认MUI是个好框架';
//						mui.toast('已删除')
//					} else {
////						info.innerText = 'MUI没有得到你的认可，继续加油'
//					}
//				})
//			});
//			$(".jiesuan button").on("click",function(){
//				$(".alert.buy").slideToggle()
//				$(".alert-back").toggle()
//			})
			$(".alert-back").on("click",function(){
				$(".alert.buy").slideUp()
				$(".alert.balance").slideUp()
				$(this).toggle()
			})
//			$(".alert.buy button").on("click",function(){
//				$(".alert.buy").slideToggle()
//				$(".alert.balance").slideToggle()
//			})
//			$(".sure-pay").on("click",function(){
//				$(".alert.buy").slideUp()
//				$(".alert.balance").slideUp()
//				$(".alert-back").hide()
//			})
	</script>
</html>
